<template>
  <div class="app-container body">
    <div class="upload">
      <image-upload :value="imageFlag" :limit="1" @input="submit"></image-upload>
    </div>
    <div class="setting">
      <div class="setting__div" v-for="img in valueList">
        <image-preview width="70%" height="100%" :src="img.url"/>
        <div style="width: 20%;text-align: center">
          <el-button type="danger" plain icon="el-icon-delete" circle style="font-size: 2rem;" @click="handleDelete(img)"></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getJiayi_about_us_home_image, updateJiayi_about_us} from "@/api/cms/jiayi_about_us";

export default {
  name: "Jiayi_about_us__call_us",
  data() {
    return {
      loading: false,
      aboutUsForm: {},
      valueList: [],
      imageFlag: null,
    };
  },
  created() {
    this.getHomeImage();
  },
  computed:{

  },
  methods: {
    getHomeImage(){
      this.loading = true;
      getJiayi_about_us_home_image().then(response=>{
        this.aboutUsForm = response.data;
        this.valueList = response.data.valueObj;
        this.loading = false;
      })
    },
    submit(url){
      this.imageFlag = url;
      this.aboutUsForm.valueObj = {url: this.imageFlag};
      updateJiayi_about_us(this.aboutUsForm).then(response => {
        this.$set(this,'imageFlag',null);
        this.getHomeImage();
        this.$modal.msgSuccess("操作成功");
      });
    },
    handleDelete(row){
      this.$modal.confirm('是否确认删除图片').then(()=>{
        this.aboutUsForm.valueObj = row.id;
        return updateJiayi_about_us(this.aboutUsForm);
      }).then(() => {
        this.getHomeImage();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
  }
};
</script>
<style scoped>
.body{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.upload{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.setting{
  width: 80%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.setting__div{
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
